<template>
    <div>

        <!--面包屑导航区域-->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/firsthop' }">首页</el-breadcrumb-item>
            <!--            <el-breadcrumb-item><a href="/">奖项查询</a></el-breadcrumb-item>-->
            <el-breadcrumb-item>考试列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!--搜索区域-->
        <h2>考试列表</h2>
        <el-card>
            <el-row>
                <el-col>
                    <el-button type="primary" @click="addContestVisible = true">添加考试</el-button>
                </el-col>
            </el-row>
        </el-card>
        <el-table :data="examList" style="width: 100%" border stripe><!--这里是要添加API接口的-->
            <el-table-column type="index"></el-table-column><!--索引列-->
            <!--            <el-table-column prop="contestId" label="竞赛ID" width="100"></el-table-column>-->
            <el-table-column prop="examName" label="考试名" width="600"></el-table-column>
            <el-table-column prop="examId" label="考试号" width="800"></el-table-column>
            <el-table-column  label="操作" width="180">
                <template slot-scope="scope">
                    <el-button type="primary"  size="mini" @click="allClass" style="margin-left: 16px;">查看详情</el-button><!--scope.row表示当前这行的用户，用他的id去查询更新-->
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                title="添加考试"
                :visible.sync="addContestVisible"
                width="40%"
                @close="addDialogClosed">
            <el-form ref="addFormRef" :model="addForm"  label-width="100px">
                <el-form-item label="考试名称" prop="examName">
                    <el-input v-model="addForm.examName" ></el-input>
                </el-form-item>
                <el-form-item label="考试号" prop="examId">
                    <el-input v-model="addForm.examId" ></el-input>
                </el-form-item>
            </el-form>
            <!--底部按钮区-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addContestVisible = false">取 消</el-button><!--点击取消隐藏对话框-->
                <el-button type="primary" @click="addCourse">确 定</el-button><!--点击确定也会隐藏对话框-->
            </span>
        </el-dialog>
        <el-drawer
                title="我是标题"
                :visible.sync="drawer"
                :with-header="false"
                size="90%">
            <el-card>
                <el-table :data="classList" style="width: 100%" border stripe><!--这里是要添加API接口的-->
                    <el-table-column type="index"></el-table-column><!--索引列-->
                    <!--            <el-table-column prop="contestId" label="竞赛ID" width="100"></el-table-column>-->
                    <el-table-column prop="classId" label="班级号" width="400"></el-table-column>
                    <el-table-column prop="className" label="课程名" width="400"></el-table-column>
                    <el-table-column prop="teacherName" label="班主任" width="300"></el-table-column>
                    <el-table-column  label="操作" width="180">
                        <template slot-scope="scope">
                            <!--修改按钮-->
                            <!--把这一行对应的id值传到处理函数中@click="showEditDialog(scope.row.id)"-->
                            <el-button @click="innerDrawer = true" type="primary" style="margin-left: 16px;" >
                                查看班级成绩
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-drawer>
        <el-drawer
                :append-to-body="true"
                :before-close="handleClose"
                :visible.sync="innerDrawer"
                size="80%">
                <el-card>
                    <el-table style="width: 100%" border stripe><!--这里是要添加API接口的-->
                        <el-table-column type="index"></el-table-column><!--索引列-->
                        <!--            <el-table-column prop="contestId" label="竞赛ID" width="100"></el-table-column>-->
                        <el-table-column prop="" label="姓名" ></el-table-column>
                        <el-table-column prop="" label="语文" ></el-table-column>
                        <el-table-column prop="" label="数学" ></el-table-column>
                        <el-table-column prop="" label="物理" ></el-table-column>
                        <el-table-column prop="" label="物理赋分" ></el-table-column>
                        <el-table-column prop="" label="化学" ></el-table-column>
                        <el-table-column prop="" label="化学赋分" ></el-table-column>
                        <el-table-column prop="" label="生物" ></el-table-column>
                        <el-table-column prop="" label="生物赋分" ></el-table-column>
                        <el-table-column prop="" label="政治" ></el-table-column>
                        <el-table-column prop="" label="政治赋分" ></el-table-column>
                        <el-table-column prop="" label="历史" ></el-table-column>
                        <el-table-column prop="" label="历史赋分" ></el-table-column>
                        <el-table-column prop="" label="地理" ></el-table-column>
                        <el-table-column prop="" label="地理赋分" ></el-table-column>
                    </el-table>
                </el-card>
        </el-drawer>

    </div>

</template>

<script>
    export default {
        name: "classGrade",
        data() {
            return {
                //获取用户列表的参数对象
                classList:[],
                examList: [],
                addContestVisible:false,
                addForm:{},
                drawer: false,
                innerDrawer: false,
            }
        },
        created() {
            this.getExamList()
        },
        methods: {
            async getExamList() {
                const {data: res} = await this.$http.get('getExam')
                this.examList = res.data
            },
            async addCourse(){
                const {data: res} = await this.$http.post('addExam', this.addForm)
                this.addContestVisible = false
                this.$message.success('发布考试成功');
                this.getCourseList()

            },
            addDialogClosed() {
                this.$refs.addFormRef.resetFields()
            },
            allClass(){
                this.drawer = true
                this.getClassList()
            },
            async getClassList() {
                const {data: res} = await this.$http.get('getClass',{
                    params: this.queryInfo
                })
                this.classList = res.data
            },
        }
    }
</script>

<style scoped>

</style>